<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title th:text="${article.title}"></title>
    <link rel="stylesheet" type="text/css" href="/turnjs/css/basic.css"/>
    <script type="text/javascript" src="/turnjs/js/jquery.js"></script>
    <script type="text/javascript" src="/turnjs/js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="/turnjs/js/main.js"></script>

</head>
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false">
<div class="flipbook-viewport" style="display:none;">
    <table style="width: 100%;position: fixed;z-index: 99999;bottom: 2px">
        <tr>
            <td style="text-align: center">
                <img id="back" src="/turnjs/image/back.png" style="width: 50px;height: 50px"/>
            </td>
            <td  style="text-align: center">
                <img id="home" src="/turnjs/image/home.png" style="width: 50px;height: 50px"/>
            </td>
            <td  style="text-align: center">
                <img id="next" src="/turnjs/image/next.png" style="width: 50px;height: 50px"/>
            </td>
        </tr>
    </table>
    <div class="container">
        <div class="flipbook">
            <div style="text-align: center">
                <div class="contentDiv" style="text-align: center">
                        <img th:src="${photo_url}" style="width: 100%;height: 100%;margin: 2px;">

                </div>
            </div>
            <div style="text-align: center">
                <div class="contentDiv" style="overflow:scroll;background:#EEEEEE;text-align: center">
                    <div style="margin:10px;margin-bottom: 50px">
                        <p>
                        <span th:text="${article.title}"></span>
                        </p>
                        <p>
                        作者:<span th:text="${article.author}"></span>
                        </p>
                        <p style="margin: 50px">
                        简介:<span th:text="${article.des}"></span>
                        </p>
                    </div>
                </div>
            </div>
            <div style="text-align: center">
                <div class="contentDiv">
                    <div style="margin: 20px;width: 90%" >
                        <p>
                        目录
                        </p>
                        <p style="text-align: left">
                            <table style="width: 100%;">
                                <tr th:each="section,sectionStat : ${articleSections}" class="list_menus" th:attr="data-page=${section.startPage}">
                                    <td style="width: 30%;text-align: left"><span th:text="${section.sTitle}"></span><span th:text="${section.title}"></span></td>
                                    <td style="width: 20%;text-align: center;"><div style="border-bottom:1px dashed #000;width: 100%"></div></td>
                                    <td style="width: 25%;text-align: right"><span style="margin-right: 30px" th:text="${section.startPage}"></span></td>
                                </tr>
                            </table>
                        </p>
                    </div>
                </div>
            </div>
            <div style="text-align: center" th:each="section,sectionStat : ${articleSections}">
                <div style="overflow:scroll;background:#EEEEEE;" class="contentDiv" th:if="${section.type} eq 1">
                    <div style="margin:10px;margin-bottom: 50px">
                        <span style="font-weight: bold;font-size: 18px" th:text="${section.sTitle}"></span><span style="font-weight: bold;font-size: 18px"  th:text="${section.title}"></span>
                        <br/>
                        <span th:utext="${section.content}"></span>
                    </div>
                </div>
                <div style="overflow:scroll;background:#EEEEEE;" class="contentDiv" th:if="${section.type} eq 2">
                    <div>
                    <iframe style="width: 100%" class="contentDiv2" th:src="'/pdfjs/web/viewer.html?showpages='+${section.filePreViewPages}+'&file='+${section.file.url}"></iframe>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    //自定义仿iphone弹出层
    (function ($) {
        //ios confirm box
        jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
            var defaults = {
                title: null, //what text
                cancelText: '取消', //the cancel btn text
                okText: '确定' //the ok btn text
            };

            if (undefined === option) {
                option = {};
            }
            if ('function' != typeof okCall) {
                okCall = $.noop;
            }
            if ('function' != typeof cancelCall) {
                cancelCall = $.noop;
            }

            var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

            var $dom = $(this);

            var dom = $('<div class="g-plugin-confirm">');
            var dom1 = $('<div>').appendTo(dom);
            var dom_content = $('<div>').html(o.title).appendTo(dom1);
            var dom_btn = $('<div>').appendTo(dom1);
            var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
            var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
            btn_cancel.on('click', function (e) {
                o.cancelCall();
                dom.remove();
                e.preventDefault();
            });
            btn_ok.on('click', function (e) {
                o.okCall();
                dom.remove();
                e.preventDefault();
            });

            dom.appendTo($('body'));
            return $dom;
        };
    })(jQuery);

    //上一页
    $("#back").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage >= 2) {
            $(".flipbook").turn('page', currentPage - 1);
        } else {
        }
    });
    // 下一页
    $("#next").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        console.log("===1==="+pageCount);
        var currentPage = $(".flipbook").turn("page");//当前页
        console.log("===2==="+currentPage);
        if (currentPage < pageCount) {
            $(".flipbook").turn('page', currentPage + 1);
        } else {
            $(document).confirm('已经是最后一页了，需要回到第一页吗', {}, function () {
                $(".flipbook").turn('page', 1); //跳转页数
            }, function () {
            });
        }
    });
    //返回到目录页
    $("#home").bind("touchend", function () {
        $(document).confirm('您确定要返回首页吗?', {}, function () {
            $(".flipbook").turn('page', 1); //跳转页数
        }, function () {
        });
    });

    // 跳指定页
    $(".list_menus").bind("click", function () {
        var page = $(this).attr("data-page");
        $(".flipbook").turn('page', parseInt(page) + 3);
    });
</script>

<script>
    function onLineReadPDF(filePath) {
        window.open("/pdfjs/web/viewer.html?file="+filePath);
    }
</script>
</body>
</html>